<template>
  <div :class="['component-panel', { horizontal: horizontal }]">
    <div class="panel-header">
      <h3>组件库</h3>
    </div>
    
    <div class="components-list">
      <!-- 基础组件 -->
      <div class="component-category">
        <div class="category-title">
          <i class="el-icon-menu"></i>
          <span>基础组件</span>
        </div>
        <div class="component-items">
          <div 
            class="component-item" 
            v-for="component in basicComponents" 
            :key="component.type"
            draggable="true"
            @dragstart="onDragStart($event, component)"
            @click="addComponent(component.type)"
          >
            <i :class="[component.icon, 'component-icon']"></i>
            <span class="component-name">{{ component.name }}</span>
          </div>
        </div>
      </div>

      <!-- 图表组件 -->
      <!-- <div class="component-category">
        <div class="category-title">
          <i class="el-icon-s-data"></i>
          <span>图表组件</span>
        </div>
        <div class="component-items">
          <div 
            class="component-item" 
            v-for="component in chartComponents" 
            :key="component.type"
            draggable="true"
            @dragstart="onDragStart($event, component)"
            @click="addComponent(component.type)"
          >
            <i :class="[component.icon, 'component-icon']"></i>
            <span class="component-name">{{ component.name }}</span>
          </div>
        </div>
      </div> -->

      <!-- 地图组件 -->
      <div class="component-category">
        <div class="category-title">
          <i class="el-icon-location"></i>
          <span>地图组件</span>
        </div>
        <div class="component-items">
          <div 
            class="component-item" 
            v-for="component in mapComponents" 
            :key="component.type"
            draggable="true"
            @dragstart="onDragStart($event, component)"
            @click="addComponent(component.type)"
          >
            <i :class="[component.icon, 'component-icon']"></i>
            <span class="component-name">{{ component.name }}</span>
          </div>
        </div>
      </div>

      <!-- 媒体组件 -->
      <div class="component-category">
        <div class="category-title">
          <i class="el-icon-picture"></i>
          <span>媒体组件</span>
        </div>
        <div class="component-items">
          <div 
            class="component-item" 
            v-for="component in mediaComponents" 
            :key="component.type"
            draggable="true"
            @dragstart="onDragStart($event, component)"
            @click="addComponent(component.type)"
          >
            <i :class="[component.icon, 'component-icon']"></i>
            <span class="component-name">{{ component.name }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// Props
interface Props {
  horizontal?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  horizontal: false
})

// Emits
const emit = defineEmits(['addComponent'])

// 组件类型定义
interface ComponentType {
  type: string
  name: string
  icon: string
  category: string
}

// 基础组件
const basicComponents = ref<ComponentType[]>([
  { type: 'text', name: '文本', icon: 'el-icon-document', category: 'basic' },
  { type: 'button', name: '长方形', icon: 'el-icon-s-grid', category: 'basic' },
  { type: 'input', name: '圆形', icon: 'el-icon-circle-plus', category: 'basic' },
  // { type: 'container', name: '容器', icon: 'el-icon-menu', category: 'basic' },
])

// 图表组件 (暂时注释，但保留定义以避免模板错误)
const chartComponents = ref<ComponentType[]>([
  // { type: 'line-chart', name: '折线图', icon: 'el-icon-s-data', category: 'chart' },
  // { type: 'bar-chart', name: '柱状图', icon: 'el-icon-data-analysis', category: 'chart' },
  // { type: 'pie-chart', name: '饼图', icon: 'el-icon-pie-chart', category: 'chart' },
  // { type: 'trend-chart', name: '趋势图', icon: 'el-icon-trending-up', category: 'chart' },
])

// 地图组件
const mapComponents = ref<ComponentType[]>([
  { type: 'base-map', name: '基础地图', icon: 'el-icon-map-location', category: 'map' },
  { type: 'map-compass', name: '指北针', icon: 'el-icon-aim', category: 'map' },
  { type: 'map-scale', name: '比例尺', icon: 'el-icon-data-line', category: 'map' },
])

// 媒体组件
const mediaComponents = ref<ComponentType[]>([
  { type: 'image', name: '图片', icon: 'el-icon-picture', category: 'media' },
  { type: 'video', name: '视频', icon: 'el-icon-video-play', category: 'media' },
])

// 拖拽开始
const onDragStart = (event: DragEvent, component: ComponentType) => {
  console.log('=== Drag started ===')
  console.log('Component type:', component.type)
  
  if (event.dataTransfer) {
    event.dataTransfer.setData('component-type', component.type)
    event.dataTransfer.effectAllowed = 'copy'
    console.log('DataTransfer set:', component.type)
  } else {
    console.error('No dataTransfer available')
  }
}

// 添加组件
const addComponent = (type: string) => {
  emit('addComponent', type)
}
</script>

<style lang="scss" scoped>
.component-panel {
  width: 100%;
  height: 100%;
  background-color: #fff;

  &.horizontal {
    display: flex;
    height: 80px;
    overflow-x: auto;
    overflow-y: hidden;

    .panel-header {
      min-width: 120px;
      border-right: 1px solid #e0e0e0;
      border-bottom: none;
      display: flex;
      align-items: center;
      justify-content: center;

      h3 {
        font-size: 14px;
        writing-mode: horizontal-tb;
      }
    }

    .components-list {
      display: flex;
      padding: 8px 16px;
      gap: 24px;
      align-items: center;
      flex: 1;
    }

    .component-category {
      margin-bottom: 0;
      min-width: 200px;

      .category-title {
        margin-bottom: 8px;
        font-size: 12px;
        white-space: nowrap;
      }

      .component-items {
        display: flex;
        gap: 8px;
        flex-wrap: nowrap;
      }

      .component-item {
        min-width: 60px;
        padding: 8px 6px;
        flex-shrink: 0;

        .component-icon {
          font-size: 20px;
          margin-bottom: 2px;
        }

        .component-name {
          font-size: 10px;
        }
      }
    }
  }
}

.panel-header {
  padding: 16px;
  border-bottom: 1px solid #e0e0e0;

  h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #303133;
  }
}

.components-list {
  padding: 16px;
}

.component-category {
  margin-bottom: 24px;

  .category-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #606266;

    i {
      font-size: 16px;
    }
  }

  .component-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .component-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #fafafa;

    &:hover {
      border-color: #409eff;
      background-color: #ecf5ff;
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(64, 158, 255, 0.2);
    }

    &:active {
      transform: translateY(0);
    }

    .component-icon {
      font-size: 24px;
      color: #409eff;
      margin-bottom: 4px;
    }

    .component-name {
      font-size: 12px;
      color: #303133;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
  }
}
</style>
